<template>
    <el-main>
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="formInline" class="el-form query-form el-form--label-right el-form--inline">
         <el-form-item label="运单号">
          <el-input size="small" v-model="formInline.transport_sn" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="所属DC">
          <el-select size="small" v-model="formInline.dept_id" placeholder="请选择" filterable>
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in deptData" :key="item.id" :value="item.id" :label="item.title">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交货日期">
          <el-date-picker size="small" v-model="formInlineD.dataValue" type="daterange" align="right" unlink-panels
            range-separator="-" format="yyyy - MM - dd " value-format="yyyy-MM-dd" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="changeDatePicker">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
        <el-button size="small" type="primary" @click="onSearch" icon="el-icon-search">搜 索</el-button>
        <el-button size="small" type="default" icon="el-icon-download">
            <a style="color: rgb(61, 31, 32);text-decoration: none;" @click="exportReport($event)"  href="">导出</a>
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="margin-top:30px" v-loading="loading">
        <el-table-column prop="transport_sn" label="运单号"></el-table-column>
        <el-table-column prop="dept_name" label="所属DC" ></el-table-column>
        <el-table-column prop="customer_num" label="客户数"></el-table-column>
        <el-table-column prop="transport_total_amt" label="运单总价"></el-table-column>
        <el-table-column prop="driver_name" label="司机"></el-table-column>
        <el-table-column prop="truck_card" label="车牌号"></el-table-column>
        <el-table-column prop="delivery_time" label="交货时间"></el-table-column>
        <el-table-column prop="meet_time" label="接单时间"></el-table-column>
        <el-table-column prop="stow_time" label="装货时间"></el-table-column>
        <el-table-column prop="un_stow_time" label="卸货时间"></el-table-column>
        <el-table-column prop="fulfill_time" label="完成时间"></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="formInline.page" :page-size="formInline.limit"
        :hide-on-single-page="true" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </el-main>
  </template>
  <script>
    import {
      mapState
    } from 'vuex'
    import {
    wallFactoryList,
    getAllDc
    } from '@/api.js'
    export default {
      name: "waybillMangeList",
      data() {
        return {
          tableData: [],
          deptData:[],
          truckData:[],
          formInline:{
            dept_id:'',
            transport_sn:'',
            start_dt:'',
            end_dt	:'',
            page:1,
            limit:10
          },
          TaskSnTask:'',
          formInlineD:{
             dataValue:[]
          },
           //分页
          total: 0,
          loading: true,
          breadcrumbName:'',
          breadcrumbNameP:'',
          breadcrumbPath:'',
        }
      },
      mounted() {
        this.breadcrumbName = this.$route.query.breadcrumbName
        this.breadcrumbPath = this.$route.query.breadcrumbPath
        this.breadcrumbNameP = this.$route.query.breadcrumbNameP
        this.getAgencyTaskList();
        this.getDeptList();
        // this.getTruckList()
      },
      methods: {
        getAgencyTaskList() {
          wallFactoryList(this.formInline).then(res => {
            this.loading = false
            if (res.ErrorCode == 0) {
              this.tableData = res.Data.list
              this.total = res.Data.total
            } else {
              this.$message.error(res.ErrorMsg)
            }
          })
        },
        getDeptList() {
          getAllDc({}).then(res => {
            if (res.ErrorCode == 0) {
              this.deptData = res.Data.list
            } else {
              this.$message.error(res.ErrorMsg)
            }
          })
        },
       getTruckList() {
        truckList({
         PageSize:-1,
        }).then(res => {
          if (res.code == 0) {
            this.truckData = res.data.list
          } else {
            this.$message.error(res.message)
          }
        })
      },
      exportReport(e) {
          e.target.href = this.baseUrl + 'report/export/warehouse_task_statement_export?transport_sn='+this.formInline.transport_sn+
          '&dept_id=' +this.formInline.dept_id+
          '&transport_sn=' +this.formInline.transport_sn+
          '&start_dt=' +this.formInline.start_dt+
          '&end_dt=' +this.formInline.end_dt+
          '&access_token=' +this.Token 
        },
      //表格查询
      onSearch () {
        this.formInline.page = 1;
        this.getAgencyTaskList();
      },
      handleCurrentChange(val) {
        this.loading = true
       this.formInline.page = val;
        this.getAgencyTaskList()
      },
      handlePass(index, row) {
         this.$router.push({
          path: '/factory/task_list_detail',
          query: {
            TaskSn: row.taskSn
            }
          })
      },
      changeDatePicker(val) {
        if (val) {
          this.formInline.start_dt = val[0]
          this.formInline.end_dt = val[1]
        } else {
          this.formInline.start_dt = ''
          this.formInline.end_dt = ''
        }
      },
      },
      computed: {
        ...mapState({
          baseUrl: state => state.baseUrl,
          Token: state => state.access_token,
        }),
      },
    }
  
  </script>
  <style scoped lang="scss">
    .search_box {
      width: 250px;
    }
  
    /deep/ .el-dialog__footer {
      text-align: center;
    }
  
  </style>
  